<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑角色</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        .container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 600px; /* Added for consistency with original new_role.html container width */
            margin: 20px auto; /* Centering the container */
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            color: #555;
        }
        input[type="text"],
        select,
        textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        textarea {
            resize: vertical;
            min-height: 100px;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            width: 100%;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>新增角色</h1>
        <form id="newRoleForm">
            <div class="form-group">
                <label for="roleName">角色名称</label>
                <input type="text" id="roleName" name="roleName" required>
            </div>
            <div class="form-group">
                <label for="rolePrompt">角色提示词</label>
                <textarea id="rolePrompt" name="rolePrompt" rows="5" required></textarea>
            </div>
            <div class="form-group">
                <label for="roleType">角色类型</label>
                <input type="text" id="roleType" name="roleType">
            </div>
            <div class="form-group">
                <label for="roleRemark">备注</label>
                <textarea id="roleRemark" name="roleRemark" rows="3"></textarea>
            </div>
            <div class="form-group">
                <label for="sound">声音</label>
                <select id="sound" name="sound" style="width: 70%;">
                    <option value="">请选择</option>
                    <option value="zh-CN-YunxiNeural">zh-CN-云希 (男) - 小说, 活泼, 阳光</option>
                    
                    <option value="zh-CN-XiaoxiaoNeural">zh-CN-晓晓 (女) - 新闻, 小说, 温和</option>
                    <option value="zh-CN-XiaoyiNeural">zh-CN-晓一 (女) - 卡通, 小说, 活泼</option>
                    <option value="zh-CN-YunjianNeural">zh-CN-云健 (男) - 体育, 小说, 热情</option>
                    <option value="zh-CN-YunxiaNeural">zh-CN-云夏 (男) - 卡通, 小说, 可爱</option>
                    <option value="zh-CN-YunyangNeural">zh-CN-云扬 (男) - 新闻, 专业, 可靠</option>
                    <option value="zh-CN-liaoning-XiaobeiNeural">zh-CN-辽宁-小北 (女) - 方言, 幽默</option>
                    <option value="zh-CN-shaanxi-XiaoniNeural">zh-CN-陕西-小妮 (女) - 方言, 开朗</option>
                    <option value="zh-HK-HiuGaaiNeural">zh-HK-晓佳 (女) - 通用, 友好, 积极</option>
                    <option value="zh-HK-HiuMaanNeural">zh-HK-晓曼 (女) - 通用, 友好, 积极</option>
                    <option value="zh-HK-WanLungNeural">zh-HK-文龙 (男) - 通用, 友好, 积极</option>
                    <option value="zh-TW-HsiaoChenNeural">zh-TW-晓辰 (女) - 通用, 友好, 积极</option>
                    <option value="zh-TW-HsiaoYuNeural">zh-TW-晓羽 (女) - 通用, 友好, 积极</option>
                    <option value="zh-TW-YunJheNeural">zh-TW-云哲 (男) - 通用, 友好, 积极</option>
                </select>
                <button type="button" id="playSoundBtn"  style="width: 70px;">试听</button>

<script>
    document.getElementById('playSoundBtn').addEventListener('click', function() {
        const soundSelect = document.getElementById('sound');
        const selectedSound = soundSelect.value;
        if (!selectedSound) {
            showMessage('请选择一个声音进行试听');
            return;
        }
        const audio = new Audio(`sounds/${selectedSound}.mp3`);
        audio.play();
    });
</script>
            </div>
            <div class="form-group">
                <label for="imgUpload">角色形象</label>
                <input type="file" id="imgUpload" name="imgUpload" accept="image/*" style="display: block; margin-bottom: 10px;">
                <img id="imgPreview" src="" alt="角色形象预览" style="max-width: 200px; max-height: 200px; display: none;">
                <input type="hidden" id="imgPath" name="imgPath">
            </div>
            <script>
                document.getElementById('imgUpload').addEventListener('change', function(e) {
                    const file = e.target.files[0];
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = function(event) {
                            document.getElementById('imgPreview').src = event.target.result;
                            document.getElementById('imgPreview').style.display = 'block';
                            document.getElementById('imgPath').value = event.target.result;
                        };
                        reader.readAsDataURL(file);
                    }
                });
            </script>
            <button type="submit">创建角色</button>
                </form>
            </div>
        </div>
    </div>

    <script src="common.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', async function() {
            const urlParams = new URLSearchParams(window.location.search);
            const roleId = urlParams.get('id');
            const titleElement = document.querySelector('h1');
            const submitButton = document.querySelector('button[type="submit"]');

            if (roleId) {
                // 编辑模式
                titleElement.textContent = '编辑角色';
                submitButton.textContent = '更新角色';

                try {
                    const response = await fetch(`/role/query?id=${roleId}`);
                    const result = await response.json();
                    if (result.code === 0 && result.data) {
                        const data = result.data;
                        document.getElementById('roleName').value = data.name || '';
                        document.getElementById('rolePrompt').value = data.prompt || '';
                        document.getElementById('roleType').value = data.type || '';
                        document.getElementById('roleRemark').value = data.remark || '';
                        document.getElementById('sound').value = data.sound || '';
                        if(data.imgPath) {
                            document.getElementById('imgPreview').style.display = 'block';
                        }
                        document.getElementById('imgPreview').src = data.imgPath || '';
                    } else {
                        showMessage('获取角色信息失败: ' + result.msg, 'error');
                    }
                } catch (error) {
                    console.error('Error:', error);
                    showMessage('请求角色信息失败，请稍后再试。', 'error');
                }
            }

            document.getElementById('newRoleForm').addEventListener('submit', async function(event) {
                event.preventDefault();

                const roleName = document.getElementById('roleName').value;
                const rolePrompt = document.getElementById('rolePrompt').value;
                const roleType = document.getElementById('roleType').value;
                const roleRemark = document.getElementById('roleRemark').value;
                const sound = document.getElementById('sound').value;
                const imgPath = document.getElementById('imgPath').value;

            try {
                const response = await fetch('/role/new', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({id: roleId, name: roleName, prompt: rolePrompt, type: roleType, remark: roleRemark, sound: sound, imgPath: imgPath })
                });

                const result = await response.json();

                    if (result.code === 0) {
                        showMessage(roleId ? '角色更新成功！' : '角色创建成功！', 'success');
                    } else {
                        showMessage((roleId ? '角色更新失败: ' : '角色创建失败: ') + result.msg, 'error');
                    }
                } catch (error) {
                    console.error('Error:', error);
                    showMessage('请求失败，请稍后再试。', 'error');
                }
            });
        });
    </script>
</body>
</html>
